<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>用户修改</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <title>用户注册</title>
    <style type="text/css">
        /* Chart.js */
        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
        .warning{
            width:200px;
            color:red;
            size:2px;
        }
        /* 按钮美化 */
        .button {
            width: 270px;
            height: 40px;
            border-width: 0px;
            border-radius: 15px;
            background:#FF6699;
            cursor: pointer;
            outline: none;
            font-family: 微软雅黑;
            color: white;
            font-size: 17px;
        }
        /* 鼠标移入按钮范围时改变颜色 */
        .button:hover {
            background: #FF6677;
        }
        #passStrength{
            height:6px;width:120px;border:1px solid #ccc;padding:2px;
        }
        .strengthLv1{
            background:red;height:6px;width:40px;
        }
        .strengthLv2{
            background:orange;height:6px;width:80px;
        }
        .strengthLv3{
            background:green;height:6px;width:120px;
        }
        .code {
            font-family:Arial;
            font-style:italic;
            color:white;
            font-size:30px;
            border:0;
            padding:2px 3px;
            letter-spacing:3px;
            font-weight:bolder;
            float:left;
            cursor:pointer;
            width:150px;
            height:50px;
            line-height:60px;
            text-align:center;
            vertical-align:middle;
            background-color:#FF6699;
        }
        span {
            text-decoration:none;
            font-size:12px;
            color:#6699FF;
            padding-left:10px;
        }

        span:hover {
            text-decoration:underline;
            cursor:pointer;
        }
    </style>

    <script type="text/javascript">
        /*添加事件监听兼容问题(为了机房中的IE浏览器做准备)处理*/
        EventListener={
            addEvent:function(ele,eve,fun){
                if(ele.addEventListener){
                    ele.addEventListener(eve,fun);
                }else if(ele.attachEvent){
                    ele.attachEvent("on"+eve,fun);
                }else{
                    ele["on"+eve]=fun;
                }
            }
        }
        window.onload=function(){
            createCode(4);
            var inputName=document.getElementsByTagName("input");
            var btnName=document.getElementsByClassName("button");
            var tdLeft=document.getElementsByClassName("td-left");
            var ID=selector("#ID");
            //第一次输入的密码
            var password=selector("#password");
            //第二次输入的密码
            var rpassword=selector("#Rpassword");

            /*ID验证*/
            EventListener.addEvent(inputName[0],"blur",function(){
                if(this.value==""){
                    ID.innerHTML="用户名不能为空！";
                }else if(inputName[0].value.length<3||inputName[0].value.length>18 ){
                    ID.innerHTML="用户名限制于3-18位！";
                }else{
                    ID.innerHTML="";
                }
            })
            EventListener.addEvent(inputName[0],"focus",function(){
                ID.innerHTML="";
            })
            /*密码格式验证*/
            EventListener.addEvent(inputName[1],"blur",function(){
                if(this.value==""){
                    password.innerHTML="密码不能为空！";
                }else if(inputName[1].value.length<6){
                    password.innerHTML="密码需要大于6位！";
                }else{
                    password.innerHTML="";
                }
            })
            EventListener.addEvent(inputName[1],"focus",function(){
                password.innerHTML="";
            })
            /*确认密码验证*/
            EventListener.addEvent(inputName[2],"blur",function(){
                var flag=makeSuremima(inputName[1].value,inputName[2].value);
                if(flag==0){
                    rpassword.innerHTML="密码输入不能为空！";
                }else if(flag==1){
                    rpassword.innerHTML="";
                }else{
                    rpassword.innerHTML="两次密码输入不一致";
                }
            })
            EventListener.addEvent(inputName[2],"focus",function(){
                rpassword.innerHTML="";
            })

            /*重置按钮之后不再显示提示内容*/
            EventListener.addEvent(btnName[1],"click",function(){
                window.location.reload();
            })

            /*密码是否相同*/
            function makeSuremima(obj1,obj2){
                obj1+="";
                obj2+="";

                var x=obj1.replace(/\s/g,"");
                var y=obj2.replace(/\s/g,"");

                if(x=="" || y==""){
                    return 0;
                }else if(x===y && x!="" && y!=""){
                    return 1;
                }else{
                    return 2;
                }
            }
            /*去除文本框内数据的所有空格(包含字符串中间的)*/
            function delSpace(obj){
                obj+="";
                obj=obj.replace(/\s/g,"");
                return obj;
            }
            /*获取select的选项值(调的是select下option的innerHTML)*/
            function selectOption(obj){
                var value="";
                for(var i=0;i<obj.length;i++){
                    if(obj[i].selected==true){
                        value=obj[i].innerHTML;
                    }
                }
                return value;
            }

            function selector(what){
                if(what.charAt(0)=="."){
                    return document.getElementsByClassName(what.slice(1));
                }else if(what.charAt(0)=="#"){
                    return document.getElementById(what.slice(1));
                }else{
                    return document.getElementsByTagName(what);
                }
            }
            /*重置时将所有warning消除,不再显示*/
            function noShow(arr){
                for(var i=0;i<arr.length-1;i++){
                    arr[i].innerHTML="";
                }
            }

        }
    </script>
</head>
<body>
<div th:replace="~{commons/ucommons::topbar}"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="~{commons/ucommons::sidebar(active='list.html')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="table-responsive">
                <form th:action="@{/user/updateUser}" method="post">
                    <table class="table table-striped table-sm">
                        <tr>
                            <th colspan="3">信息修改</th>
                        </tr>
                        <tr>
                            <td colspan="3" height="20px"></td>
                        </tr>
                        <tr>
                            <td>用户Id</td>
                            <td>
                                <input name="id" type="text" th:value="${user.getId()}" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>用户名</td>
                            <td>
                                <input name="name" type="text" th:value="${user.getName()}" class="text"/>
                            </td>
                            <td id="ID" class="warning"></td>
                        </tr>
                        <tr>
                            <td>输入密码</td>
                            <td>
                                <input type="password" name="password" th:value="${user.getPassword()}" id="pass"/>
                            </td>
                            <td id="password" class="warning"></td>
                        </tr>
                        <tr>
                            <td>密码强度</td>
                            <td colspan="2" height="40px">
                                <div id="passStrength"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>确认密码</td>
                            <td>
                                <input type="password" class="text" name="rpass"  th:value="${user.getPassword()}"/>
                            </td>
                            <td id="Rpassword" class="warning"></td>
                        </tr>
                        <tr>
                            <td>姓名</td>
                            <td>
                                <input type="text" name="fullName" th:value="${user.getFullName()}" class="text"/>
                            </td>
                            <td id="LastName" class="warning">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>E-mail</td>
                            <td>
                                <input type="email" name="email" th:value="${user.getEmail()}" class="text"/>
                            </td>
                            <td id="E-mail" class="warning">

                            </td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td>
                                <input type="text" name="tel" th:value="${user.getTel()}" class="text"/>
                            </td>
                            <td id="Phone" class="warning">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>住址</td>
                            <td>
                                <input type="text" name="address" th:value="${user.getAddress()}" class="text"/>
                            </td>
                            <td id="address" class="warning">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>密保问题</td>
                            <td>
                                <select id="problem1" name="problem" style="width: 100px">
                                    <option value="1" selected="selected">故乡地址</option>
                                    <option value="2">家庭住址</option>
                                    <option value="3">公司名称</option>
                                    <option value="4">爱人姓氏</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>密保答案</td>
                            <td>
                                <input type="text" name="answer" class="text"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" align="center">
                                <div id="slideBar"></div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" height="30px"></td>
                        </tr>
                        <tr>
                            <td align="right">
                                <input type="submit" value="修改" class="button"/>
                            </td>
                            <td>
                                <input type="reset" value="重置" class="button"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </main>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
</body>
<script type="text/javascript">
    var dataList = ["0","1"];
    var options = {
        dataList: dataList,
        success:function(){
            console.log("show");
        },
        fail: function(){
            console.log("fail");
        }
    };
    SliderBar("slideBar", options);
</script>
<script type="text/javascript">
    function PasswordStrength(passwordID,strengthID){
        this.init(strengthID);
        var _this = this;
        document.getElementById(passwordID).onkeyup=function(){
            _this.checkStrength(this.value);
        }
    };
    PasswordStrength.prototype.init = function(strengthID){
        var id = document.getElementById(strengthID);
        var div = document.createElement('div');
        var strong = document.createElement('strong');
        this.oStrength = id.appendChild(div);
        this.oStrengthTxt = id.parentNode.appendChild(strong);
    };
    PasswordStrength.prototype.checkStrength = function (val){
        var aLvTxt = ['','低','中','高'];
        var lv = 0;
        if(val.match(/[a-z]/g)){lv++;}
        if(val.match(/[0-9]/g)){lv++;}
        if(val.match(/(.[^a-z0-9])/g)){lv++;}
        if(val.length < 6){lv=0;}
        if(lv > 3){lv=3;}
        this.oStrength.className = 'strengthLv' + lv;
        this.oStrengthTxt.innerHTML = aLvTxt[lv];
    };
</script>
<script type="text/javascript">
    new PasswordStrength('pass','passStrength');
</script>
</html>